<template>
    <div class="warp">
        <el-form ref="form" :model="formQuery" size="mini" class="formQuery">
            <el-form-item label="专家姓名：" label-width="120px">
                <el-input style="width: 170px" size="mini" v-model="formQuery.name"></el-input>
            </el-form-item>
            <div class="query-bar">
                <el-button type="primary" size="small" @click.stop="getFindExpert()" round>查询</el-button>
                <el-button size="small" @click.stop="handleAddExpert" round>新增</el-button>
            </div>
        </el-form>
        <div class="content">
            <div class="content-table">
                <el-table
                        :data="tableData"
                        border
                        size="small"
                        style="width: 100%"
                        header-row-class-name="table-header">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="账号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="department"
                            label="单位"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button @click.stop="handleDelExpert(scope.row.id)" type="danger" size="small" round>删除</el-button>
                            <el-button @click.stop="handleUpExpert(scope.row)" type="primary" size="small" round>修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        @current-change="handleCurrentPage"
                        :total="total"
                        :current-page="pageNum">
                </el-pagination>
            </div>
        </div>
        <em-popover v-if="showPopover" :showPopover.sync="showPopover" @commitPopover="getFindExpert" :manageInfo="manageInfo"></em-popover>
    </div>
</template>

<script>
    import Qs from 'qs'
    import emPopover from '@/components/reviewsManage/emPopover'
    import { findExpert,delExpert } from '@/service/api'
    export default {
        name: "expertManage",
        data() {
            return {
                formQuery:{
                    name:''
                },
                showPopover:false,
                manageInfo:{},
                tableData:[],
                pageNum: 1,
                total:0,
            }
        },
        created() {
            this.getFindExpert()
        },
        methods: {
            getFindExpert() {
                if(this.formQuery.name){
                    this.pageNum = 1;
                }
                let params = {
                    name: this.formQuery.name,
                    pageNum: this.pageNum,
                    pageSize:10
                };
                findExpert(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        console.log(res)
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    } else {
                        console.log(res)
                    }
                });
            },
            handleAddExpert(){
                this.showPopover = true;
                this.manageInfo = {}
            },
            handleCurrentPage(e) {
                this.pageNum = e;
                this.getFindExpert()
            },
            handleDelExpert(id) { //删除专家
                let params = {id:id}
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delExpert(Qs.stringify(params)).then(res => {  //
                        if (res.code == 200) {
                            console.log(res)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getFindExpert()
                        }
                    })
                }).catch(()=>{})
            },
            handleUpExpert(info) {
                this.manageInfo = info;
                this.showPopover = true;
            }
        },
        components:{
            emPopover
        },
    }
</script>

<style scoped>
    .warp{
        height: 100%;
        min-width: 800px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
    }
    .warp >>> .el-form{
        margin-top: 36px;
    }
    .warp >>> .el-form-item{
        margin-right: 50px;
    }
    .formQuery{
        display: flex;
    }
    .query-bar >>> .el-button {
        width: 80px;
        margin-right: 20px;
    }
    .content-table{
        margin: 13px 25px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }
    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }
    .el-form{
        margin-top: 18px;
    }
    .content-table >>> .is-round{
        padding: 6px 15px;
    }
    .content-table >>>.el-table--small td{
        padding: 7px 0;
    }
    .pagination{
        margin-top: 10px;
        text-align: end;
        padding-right: 16px;
    }
</style>
